<% @page_title = "Login" %>

<% @page_message = "Sign in to your account" %>

<div class="space-y-6">
  <form class="space-y-6 rodauth" role="form" method="POST" id="login-form">
    <%== rodauth.login_additional_form_tags %>
    <%== rodauth.csrf_tag %>

    <%== render("components/rodauth/login_field") %>
    <% if rodauth.valid_login_entered? %>
      <% if rodauth.has_password? %>
        <%== render("components/rodauth/password_field") %>
      <% end %>
    <% end %>
  </form>

  <% if rodauth.valid_login_entered? %>
    <% identities = AccountIdentity.where(account_id: rodauth.account_id).all %>
    <% unless identities.empty? %>
      <div class="relative flex justify-center text-sm font-medium leading-6">
        <span class="bg-white px-6 text-gray-900"><%= rodauth.has_password? ? "Or login" : "Login" %>
          with:</span>
      </div>
    <% end %>

    <% identities.each do |identity| %>
      <% if identity.provider.start_with?("0p") %>
        <% provider = OidcProvider.with_pk!(UBID.to_uuid(identity.provider)) %>
        <% provider_name = provider.display_name %>
        <% content_security_policy.add_form_action(provider.url) %>
      <% end %>
      <form action="<%= rodauth.omniauth_request_path(identity.provider) %>" role="form" method="POST" class="grow">
        <div class="hidden"><%== rodauth.csrf_tag(rodauth.omniauth_request_path(identity.provider)) %></div>
        <button
          class="flex w-full items-center justify-center gap-3 rounded-md bg-white px-3 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
          type="submit"
        >
          <%== part("components/icon", name: identity.provider.to_s) unless provider_name %>
          <span class="text-sm font-semibold leading-6"><%= provider_name || identity.provider.capitalize %></span>
        </button>
      </form>
    <% end %>
  <% end %>

  <% if !rodauth.valid_login_entered? || rodauth.has_password? %>
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <input
          id="remember-me"
          name="remember-me"
          type="checkbox"
          class="h-4 w-4 rounded border-gray-300 text-orange-600 focus:ring-orange-600"
          form="login-form"
        >
        <label for="remember-me" class="ml-2 block text-sm text-gray-900">Remember me</label>
      </div>

      <div class="text-sm">
        <a
          href="/reset-password-request?login=<%= Rack::Utils.escape(rodauth.param("login")) %>"
          class="font-medium text-orange-600 hover:text-orange-700"
        >Forgot your password?</a>
      </div>
    </div>
  <% end %>

  <div class="flex flex-col text-center">
    <% if !rodauth.valid_login_entered? || rodauth.has_password? %>
      <%== part("components/form/submit_button", text: "Sign in", attributes: {form: "login-form"}) %>
    <% end %>
    <% unless rodauth.valid_login_entered? %>
      <a href="/create-account" class="mt-2 text-sm font-semibold leading-6 text-gray-900">Create a new account</a>
    <% end %>
  </div>
</div>

<%== render("auth/social_buttons") unless rodauth.valid_login_entered? %>
